﻿<template>
  <div class="wrapper_c">
    <div class="move_l">
      <img src="../../static/img/ad_scroll_L.png"  v-on:click.self="move_l"/>
    </div>
    <div class="move_r">
      <img src="../../static/img/ad_scroll_R.png"  v-on:click.self="move_r"/>
    </div>
   <div class="wrapper" ref="wrapper">
     <div class="wapper_lsit"  v-bind:style={width:all_width,paddingLeft:pd_l,paddingRight:pd_r} ref="wrapper_list" v-move_left>
       <!-- box s -->
       <div class="box" v-bind:class="{box_act:box.act}" v-for="box in card_mess" ref="box" style="margin-right:6px;" >
         <img v-bind:src="box.backgroundImage|img_address" class="box_header_img"/>
         <div class="card_title_new_scroll">
           {{box.character}}
         </div>
       </div>
       <!-- box e -->
       <!-- user_box_s -->
       <div class="box" v-bind:class="{box_act:box.act}" v-for="box in user_card_mess" ref="box" style="margin-right:6px;">
         <img v-bind:src="box.image|img_address" class="box_header_img"/>
         <div class="card_title_new_scroll">
           {{box.title}}
         </div>
       </div>
       <!-- user_box e -->
     </div>
   </div>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import "../filter/filter.js";
  import common from "../common/common.js";
  import qs from 'qs';
  export default {
    name: 'carrousel',
    data() {
      return {
        box_list: [{ "act": false }, { "act": true }, { "act": false }, { "act": false }, { "act": false }],
        box_list_index:1,
        all_width: "",
        left_scroll: "",
        m_r: "6px",
        single_width: "",
        length: "",  //动画的 移动距离
        ani_Id: null,
        ani_Flag: null,
        mounted_width: "",
        pd_l: "",
        pd_r:"",
        big_single_width: "",
        show_list: "",
        term_name: "",
        pageNo: 1,
        pageSize: 10,
      }
    },
    ...mapActions([
      "thom_redirect",
    ]),
    ...mapMutations([
      "header_scroll_nav"
    ]),
    props: ["card_mess", "get_scroll_data", "user_list","user_card_mess"],
    directives: {
      move_left: {
        // 指令的定义---
        inserted: function (el) {
          let startX, startY;
          //el.addEventListener("touchstart", function (e) {
          //  e.preventDefault();
          //  return;
          //  startX = e.changedTouches.clientX
          //  startY = e.changedTouches.clientY;

          //});
          //el.addEventListener("touchmove", function (e) {
          //  e.preventDefault();
          //});
        }
      },
      move_right: {
        inserted: function (el) {

        }
      }
    },
    updated() {
      if (this.card_mess.length == 0) {
        console.log("inininin_card_mess++++++++++++++++++++++++++++");
        this.card_mess_data = this.user_card_mess;
      } else {
 
        this.card_mess_data = this.card_mess;
      }
    },
    mounted() {
      try {
        this.$refs.box[0]
      } catch (e) {
        return
      }

      if (this.card_mess.length == 0) {
        this.card_mess_data = this.user_card_mess;
      } else {
        this.card_mess_data = this.card_mess;
      }

      let single_width = window.getComputedStyle(this.$refs.box[0]).width.replace("px","");
      //变大时的宽度
      let big_single_width = window.getComputedStyle(this.$refs.box[1]).width.replace("px","");
      //总长度
      this.all_width = (this.box_list.length - 1) * (parseInt(single_width) + 12) + parseInt(big_single_width + 6) + "px"
      this.$nextTick(() => {
        if (this.card_mess_data.length == 0) return;
        //single_width == 单个的 宽度
         
        //页面 全局
        this.single_width = single_width;
        this.big_single_width = big_single_width;
        //this.big_single_width = big_single_width;

        this.mounted_width = (single_width - 4) / 2;
        this.pd_l = (parseInt(single_width) + 6) + "px";
        this.pd_r = (parseInt(single_width)+ 6) + "px";
        console.log("nexttrick+++++++++++++++++++++++++++++++=")
        //滑到第二个
        this.$refs.wrapper.scrollLeft = parseInt(single_width) / 2 + parseInt(big_single_width) / 2;
        
        //类型名
        this.term_name = this.card_mess_data[this.box_list_index].character;
        this.$emit("get_scroll_data",this.term_name)//初始数据
      })
    },
    methods: {
      get_data_scroll: function () {
        let user_id = common.get_user_id();//获取用户id
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/adventurecard/GettingCardInformation',
          qs.stringify(
            {
              'term': this.term_name,
              'uid': user_id,
              'pageNo': this.pageNo,
              'pageSize': this.pageSize
            })
          )
          .catch((thrown) => {
            Indicator.close();
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000,
            });
          }).then((e) => {
            //记录id
            Indicator.close();
            console.log(e.data);
            this.show_list = e.data;
          })
      },
      goto_box_11: function () {
       
      },
      goto_box: function () {
        Indicator.open();
        this.$store.dispatch("thom_redirect",
          { name: "/Advanture_visit", router: this.$router });
      },
      move_l: function () {
        this.ani_Flag = 2; //flag
        if (this.ani_Id != null) {//停止动画
          window.cancelAnimationFrame(this.ani_I);
        }
        let length = parseInt(this.$refs.wrapper.scrollLeft) - parseInt(this.single_width) - 6;
        this.length = length;
        
        if (this.box_list_index == 0) {
          this.card_mess_data[this.box_list_index].act = true;
          return;
        }; //第一个
        this.card_mess_data[this.box_list_index].act = false;
    
        this.box_list_index -= 1;
       
        this.card_mess_data[this.box_list_index].act = true;
        //开始动画
        this.move_scroll_left();
      },
      move_r: function () {
        this.ani_Flag = 1 //flag
        if (this.ani_Id != null) {//停止动画
          window.cancelAnimationFrame(this.ani_I);
        }
        let length = parseInt(this.$refs.wrapper.scrollLeft) + parseInt(this.single_width) + 6;
        this.length = length;
        if (this.box_list_index + 1 >= this.card_mess_data.length) return;//最后了
        this.card_mess_data[this.box_list_index].act = false;
        this.box_list_index += 1;
        this.card_mess_data[this.box_list_index].act = true;
           //开始动画
        this.move_scroll_left();
      },
      move_scroll_left(flag) {
        //flag 判断 左右
        let step = 6//步长

        if (this.ani_Flag == 1) {  //left ++
          //left 
          if (this.$refs.wrapper.scrollLeft <= this.length) {
            this.$refs.wrapper.scrollLeft = step + this.$refs.wrapper.scrollLeft;
            this.ani_Id =  window.requestAnimationFrame(this.move_scroll_left);
          } else {
            //term 赋值 s
            this.term_name = this.card_mess_data[this.box_list_index].character;
            //term 赋值 e
            
            this.$emit("get_scroll_data", this.term_name)//初始化数据
          }
        } else {//right --
          if (this.$refs.wrapper.scrollLeft >=this.length) {
            this.$refs.wrapper.scrollLeft = this.$refs.wrapper.scrollLeft - step;
            this.ani_Id =  window.requestAnimationFrame(this.move_scroll_left);
          } else {
            //term 赋值 s
            this.term_name = this.card_mess_data[this.box_list_index].character;
            //term 赋值 e

            this.$emit("get_scroll_data", this.term_name)//初始化数据
          }
        }
      }
    }
    //get data 
  }
</script>
<style scoped>
  .box_list_title{
     height:4vw;
     line-height:4vw;
     font-weight:600;
  }
  .box_list_qus {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height:4vw;
    margin-top:2vw;
  } 
  /*box_header_img s*/
 
  .box_header_img {
    display:block;
    height: 100%;
    border-radius: 1vw 1vw 0 0;
  } 
  .card_header {
    margin-top: 4vw;
  } 
  .card_wrapper_box {
    margin-top: 4vw;
  } 
  .box_header_img {
    width: 100%;
  }
  /*box_header_img e*/
  .wrapper_c {
    position: relative;
  }
  .move_l img{
    width:4vw;
    display:block

  }
  .move_r img {
    width: 4vw;
    display: block
  }
  .move_l {
    position: absolute;
    left:1vw;
    font-size: 50px;
    color: #333;
    z-index: 100;
    top:14vw;
  }
  .move_r{
    right:3vw;
    position:absolute;
    font-size:50px;
    color:#333;
    z-index:50;
    top:14vw;
  }
  .wapper_lsit {
    height: 100%;
    white-space: nowrap;
    float: left;
    overflow:hidden;
   
   
  } 
  .wrapper {
    width: 85vw;
    height: 44vw;
    overflow:hidden;
    padding-top:2.6vw;
    margin: 0 auto;
  }

  .box {
    font-size: 3vw;
    /*border: 1px solid #9f5c2f;*/
    border-radius: 1vw;
    float: left;
    width: 26vw;
    height: 37vw;
    margin-top: 0.4rem;
    /*border:2px solid #ff6a00;*/
    background-color: #fff;
    white-space:normal;
    position:relative;
    /*margin-right:2vw;*/
  }
  .card_title_new_scroll {
    font-size: 4vw;
    width: 2vw;
    top: 50%;
    left: 50%;
    color: #9f5c2f;
    transform:translate(-80%,-50%);
    position: absolute;
    font-weight:600;
  } 
  .box_act {
    margin-top: 0;
    width: 30vw;
    //height:100%;
    height: 40vw;
  }
  .card_wrapper{
    overflow:hidden;
  }
</style>